<template>
    <div>
        <div class="div1">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                fixed
                prop="waybill_number"
                label="发货单号"
                width="150">
                </el-table-column>
                <el-table-column
                fixed
                prop="equipment_id"
                label="设备ID"
                width="150">
                </el-table-column>
                <el-table-column
                fixed
                prop="goods_name"
                label="货物类型"
                width="250">
                </el-table-column>
                <el-table-column
                fixed
                prop="safe_temperature"
                label="安全温度(°C)"
                width="120">
                </el-table-column>
                <el-table-column
                fixed
                prop="interval"
                label="记录间隔"
                width="120">
                </el-table-column>
                <el-table-column
                fixed
                prop="startup_delay"
                label="启动延时"
                width="120">
                </el-table-column>
                <el-table-column
                fixed
                prop="start_time"
                label="开始时间"
                width="250">
                </el-table-column>
                <el-table-column
                fixed
                prop="end_time"
                label="结束时间"
                width="250">
                </el-table-column>
                <el-table-column
                fixed
                prop="waybill_type"
                label="运单状态"
                width="120" >
                <template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.waybill_type | is_ok }}</span>
					</template>
                </el-table-column>
                <el-table-column
                fixed
                prop="temperature_record"
                label="温度记录"
                width="110">
                <template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.temperature_record | is_alert }}</span>
					</template>
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="200">
                <template slot-scope="scope">
                   <a :href="'http://localhost:8000/download/?way_id=' + id"> <el-button  type="text" size="small">下载记录</el-button></a>
                </template>
                </el-table-column>
            </el-table-column>
            </el-table>
        </div>

        <div class="div">
            <div id="test-map" />
        </div>

        <div class="div3">
            <div id="main" style="width: 600px;height: 400px;"></div>
        </div>
        
    </div>
</template>


<script>
import echarts from 'echarts'
import { lazyAMapApiLoaderInstance } from 'vue-amap'
import { get_GainAaybill, get_f_address,post_download } from '../../api/api.js'
export default {
    data(){
        return{
            //运单id
            id:this.$route.query.id,
            //运单数据
            tableData: [],
             map: '', // 地图
            // 轨迹数组，格式[{},{},...]
            path: [
                {
                path: []
                }
            ],
            //折线图
            charts: '',
            //时间
            opinion: [],
            //温度
            opinionData: [],
            //所有时间温度
            all_data:[],
        }
    },
    mounted() {
        this.ginaybill() 
        lazyAMapApiLoaderInstance.load().then(() => {
        this.map = new AMap.Map('test-map', {
            // zooms: [13, 50], // 地图缩放范围
            center: new AMap.LngLat(116.397428, 39.90923)
        })
        AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
            if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！')
            return
            }
            // 创建组件实例
            var pathSimplifierIns = new PathSimplifier({
            map: this.map,
            zIndex: 100, // 图层叠加顺序
            data: this.path, // 巡航路径
            // 获取巡航路径中的路径坐标数组
            getPath: (pathData, pathIndex) => {
                return pathData.path
            }
            })
            // 创建巡航器
            var pathNavigator = pathSimplifierIns.createPathNavigator(0, {
            loop: true, // 是否循环
            speed: 200000 // 速度(km/h)
            })
            pathNavigator.start()
        })
        }) 
    },
    filters:{
        // 报警/正常           
        is_alert(type){
            if(type==0){
                return "正常"
            }else{
                return "报警"
            }
        },
        // 云途 / 完成
        is_ok(type){
            if(type==0){
                return "正在云途"
            }else{
                return "完成"
            }
        }   
    },
    methods: {
        //下载记录
        handleClick(wid){
            post_download({way_id:wid}).then(res=>{
                console.log(res)
            })
        },
        //获取运单详情
        ginaybill(){
            get_GainAaybill({way_id:this.id}).then(res=>{
                this.tableData.push(res.data)
                
                let f_address = [ res.data['address'].split(',')[0],res.data['address'].split(',')[1]]
                let s_address = [ res.data.delivery.split(',')[0],res.data.delivery.split(',')[1]]

                this.path[0].path.push(f_address)
                this.path[0].path.push(s_address)
                // console.log(res.data['temperature_all'])
                // 编辑温度数据到折线图
                this.all_data = eval('(' + res.data['temperature_all'] + ')')
                for(let i=0,l=this.all_data.length;i<l;i++){
                    this.opinion.push(this.all_data[i]['time'])
                    this.opinionData.push(this.all_data[i]['temp'])
                }

                let time = this.opinion
                let date_s = this.opinionData
                let id = 'main'
                this.drawLine(time,date_s) 
            })
        },
        // 折线图
        drawLine(time,data_s) {
            this.charts = echarts.init(document.getElementById('main'))
            this.charts.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['温度数据']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    name:'Date',
                    data:time
                
                },
                yAxis: {
                    type: 'value',
                    name:'°/c'
                },

                series: [{
                    name: '温度数据',
                    type: 'line',
                    data: data_s
                }]
            })
        }
    },
}
</script>


<style>
    .div1{
        height: 300;
    }
     #test-map{
        height:700px;
        width:1000px;
        float: left;
        margin-top: 100px;
    }
    .div3{
        height:800px;
        width:700px;
        float: right;
        margin-top: 200px; 
        margin-right: 50px;
    }
</style>